<!DOCTYPE html>
<html>
<head>

    <title>ATM后台管理系统</title>
</head>
<body class="bgf6">

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100" >
    <div class="container pt10">
        <div class="dflx sbt">
            <div th:include="common/boAtmLeft :: atmLeft"></div>

            <div id="app" class="body-right">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <div class="box">
                            <div class="box-title"><span>添加权限</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title"><i class="cred">*</i> 权限名称</span>
                                    <div class="content">
                                        <input type="text" v-model="perimissionValue" class="form-control" value="" placeholder="请输入权限名称"/>
                                    </div>
                                    <span class="title">权限值</span>
                                    <div class="content">
                                        <input type="text" v-model="perimissionName" class="form-control" value="" placeholder="请输入权限值"/>
                                    </div>
                                </div>

                                <div class="two">
                                    <span class="title">URL地址</span>
                                    <div class="content">
                                        <input type="text" v-model="url" class="form-control" value="" placeholder="请输入URL地址"/>
                                    </div>
                                    <span class="title">叶子节点</span>
                                    <div class="content">
                                        <el-radio v-model="leaf" label="1">是</el-radio>
                                        <el-radio v-model="leaf" label="0">否</el-radio>
                                    </div>
                                </div>

                                <div class="two">
                                    <span class="title">菜单</span>
                                    <div class="content">
                                        <el-radio v-model="menu" label="1">是</el-radio>
                                        <el-radio v-model="menu" label="0">否</el-radio>
                                    </div>

                                    <span class="title">父菜单</span>
                                    <div class="content">
                                        <el-select v-model="parentId" placeholder="请选择父节点">
                                            <el-option
                                                    v-for="item in parentMenus"
                                                    :label="item.permissionValue"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>

                                    </div>
                                </div>

                            </div>
                        </div>



                        <div class="tc mt40">

                            <button v-on:click="sumitButtonFunction" type="button" class="btn btn-primary f12"> 提交 </button>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/jquery.bs-table.js"></script>

<script src="/js/vue.js"></script>
<script src="/js/ele.js"></script>
<script src="/js/dayuanit.js"></script>

<script type="text/javascript">

    var boAtm = new Vue({
        el : '#app',
        data : {
            perimissionValue : '',
            perimissionName : '',
            url : '',
            leaf : '',
            menu : '',
            parentId : 0,
            parentMenus : []
        },
        created : function () {
            loadFirstMenu();
        },
        methods  : {
            sumitButtonFunction : function () {
                let params = {
                    perimissionValue : this.perimissionValue,
                    perimissionName : this.perimissionName,
                    url : this.url,
                    leaf : this.leaf,
                    menu : this.menu,
                    parentId : this.parentId

                }
                createPerimission(params);
            }
        }
    })


    function createPerimission(params) {
        dayuanit.ajax('/user/createPermission', {
            perimissionValue : params.perimissionValue,
            perimissionName : params.perimissionName,
            url : params.url,
            leaf : params.leaf,
            menu : params.menu,
            parentId : params.parentId
        }, function (result) {
            alert('权限创建成功');
        })
    }

    function loadFirstMenu() {
        dayuanit.ajax('/user/loadFirstMenu',{}, function (result) {
            boAtm.parentMenus = result.data;
        })
    }
</script>

</body>
</html>
